<template>
    <div>
        <el-button :icon="Plus" type="primary" :disabled="!categoryStore.category3Id" @click="toAddSpuInfo">添加SPU
        </el-button>
        <el-table border style="margin:20px 0" :data="spuList">
            <el-table-column label="序号" type="index" align="center" width="80px"></el-table-column>
            <el-table-column label="SPU名称" prop="spuName"></el-table-column>
            <el-table-column label="SPU描述" prop="description"></el-table-column>
            <el-table-column label="操作">
                <template v-slot="{ row, $index }">
                    <el-button size="small" type="primary" title="添加SKU" :icon="Plus"></el-button>
                    <el-button size="small" type="primary" title="修改SPU" :icon="Edit" @click="toEditSpuInfo(row)">
                    </el-button>
                    <el-button size="small" type="info" title="查看SKU列表" :icon="InfoFilled"></el-button>
                    <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" :icon="InfoFilled"
                        icon-color="#626AEF" title="真的确定要删除此条数据么?" @confirm="deleteSpuInfo(row.id)">
                        <template #reference>
                            <el-button title="删除" type="danger" size="small" :icon="Delete" />
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 15, 20]"
            :small="small" :disabled="disabled" :background="background"
            layout=" prev, pager, next, jumper,->, sizes,total" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>
</template>

<script lang="ts">
export default {
    name: 'SpuList'
}
</script>
<script lang="ts" setup>
import { Plus, Edit, Delete, InfoFilled } from '@element-plus/icons-vue'
import { reqGetSpuListData, reqDeleteSpuInfo } from '@/api/product/spu'
import { ref, watch } from 'vue'
import { useCategoryListStore } from '@/stores/categoryList';
import { ElMessage } from 'element-plus'

const categoryStore = useCategoryListStore()

const emits = defineEmits(['changeScene', 'getSpuInfo'])//接收自定义事件

//分页相关的变量
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const currentPage = ref<number>(1)
const pageSize = ref<number>(5)
const total = ref<number>()

const spuList = ref([])
const loading = ref(false)

// 1、定义一个获取spu列表数据的函数
const getSpuListData = async () => {
    const result = await reqGetSpuListData(currentPage.value, pageSize.value, categoryStore.category3Id)
    spuList.value = result.records
    total.value = result.total
}

// 2、监听三级导航数据，只要三级导航一变化，就立即发送请求
watch(
    () => categoryStore.category3Id,
    category3Id => {
        if (!category3Id) {
            spuList.value = [] //清空列表页
            return //代码不要向下执行 不要发送请求了
        }
        getSpuListData()
    },
    { immediate: true }
)

//3、更改每页显示条数时触发的事件处理函数
const handleSizeChange = (val: number) => {
    pageSize.value = val
    currentPage.value = 1
    getSpuListData()
}

//4、翻页触发的事件处理函数
const handleCurrentChange = (val: number) => {
    currentPage.value = val
    getSpuListData()
}

//5、点击删除按钮删除spuInfo
const deleteSpuInfo = async (id: number) => {
    loading.value = true
    await reqDeleteSpuInfo(id)
    //提示一下删除成功
    ElMessage.success('删除本条信息成功')
    //重新渲染页面
    getSpuListData()
    loading.value = false
}

//6、编辑SpuInfo之数据回显
const toEditSpuInfo = row => {
    loading.value = true
    //跳转到SpuInfo.vue页面
    emits('changeScene', 2)
    emits('getSpuInfo', {
        ...row,
        spuImageList: [],
        spuSaleAttrList: []
    })
    loading.value = false
}

//7、添加spuInfo
const toAddSpuInfo = () => {
    //跳转到SpuInfo.vue页面
    emits('changeScene', 2)
    emits('getSpuInfo', {})
}


</script>
<style>
</style>